<template>
  <div class="cjwz_box">
    <headercom></headercom>
    <div class="bcg">
      <div class="hedlist">
        <div class="seach">
          <div class="sele">
            <a-input placeholder="请输入查询关键字 型号  " style="width: 250px" @change="onSearch" />
            <a-icon type="search" class="search" />
          </div>
        </div>
      </div>
      <div class="cjwz">
        <div class="hydj" v-if="$store.state.tjwz">
          <fbxjym class="hydj_xgym"></fbxjym>
        </div>

        <a-table
          :pagination="pagination"
          :scroll="{ x: 1900}"
          :columns="columns"
          :dataSource="data"
          bordered
          @change="getShopCartList"
        >
          <template slot="ZKJHSJ" slot-scope="text, record, index">
            <div>
              
               <a-input-number
                        :defaultValue="Number(record.ZKJHSJ)"
                        :class="'inpval_'+record.key"
                        :min="0"
                        style="width:100px;"
                        :max="99999999999"
                        :step="1"
                        :precision="2"
                        class="input"
                        @change="e=> numChange(e,record.key,index)"
                      />
            </div>
          </template>
           <template slot="zje" slot-scope="text, record, index">
           <span class="listspan">
                小计：
                <span style="color: red;">
                  ￥
                  {{record.ZKJHSJ*record.DHSL}}</span>
                
              </span>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <span>
              <a class="del" @click="() => save(record)">保存</a>
              <!-- <a-popconfirm title="确认取消吗?" @confirm="() => cancel(record.key)">
                 <a class="del">取消</a> 
              </a-popconfirm> -->
            </span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headercom from "../header-comm/header.vue";


const columns = [
  {
    title: "订购型号",
    dataIndex: "XL",
    scopedSlots: { customRender: "XL" },
    width: 300
  },
  {
    title: "品牌",
    dataIndex: "SCCJC",
    scopedSlots: { customRender: "SCCJC" }
  },
  {
    title: "名称",
    dataIndex: "zlmc",
    scopedSlots: { customRender: "zlmc" }
  },

  {
    title: "数量",
    dataIndex: "DHSL",
    scopedSlots: { customRender: "DHSL" }
  },
  {
    title: "价格",
    dataIndex: "HSJ",
    scopedSlots: { customRender: "HSJ" }
  },
  {
    title: "结算价",
    dataIndex: "ZKJHSJ",
    scopedSlots: { customRender: "ZKJHSJ" }
  },
  {
    title: "小计",
     scopedSlots: { customRender: "zje" }
  },
  {
    title: "订货公司",
    dataIndex: "DHDWMC"
  },
  {
    title: "订货联系人 ",
    dataIndex: "DHR"
  },
  {
    title: "联系电话 ",
    dataIndex: "DHRPHONE"
  },
  {
    title: "时间",
    dataIndex: "DHRQ"
  },
  {
    title: "备注",
    dataIndex: "jaName",
    scopedSlots: { customRender: "jaName" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: 160,
    fixed: "right",
    scopedSlots: { customRender: "operation" }
  }
];
const data = [];

export default {
  data() {
    
    return {
      serchvalue: "",//查询关键字
      data,
      columns,//数据据表头
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      dataSource: [],
    };
  },
  methods: {

    //搜索框
    onSearch(e) {
      this.serchvalue = e.target.value;
      this.getShopCartList(this.pagination, this.serchvalue);
    },
    //动态改变折扣价、小计
    numChange(value,key,index) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      //存在该条记录切是数值型更新折扣价
      if (target&& Number(value)) {
        target['ZKJHSJ'] = value;
        this.data = newData;
      }
    },
    

    //修改价格
    save(value) {

    console.log('ssssssssss',value);
      this.axios
        .post(
          "shopcart/updateCartsPrice.php",
          qs.stringify({
             id_num:value.ID_NUM,
             zkjshj:value.ZKJHSJ
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.getsiteAdminList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    
    },
 

    //获取购物车列表
    getShopCartList(pagination, serchvalue) {
      this.axios
        .post(
          "shopcart/cartsList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            keywords: serchvalue,
            gyssqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log("ss", res);
          if (res.data.code == 303) {
            this.data = res.data.result;

            this.pagination.total = Number(res.data.result.total);
            for (var i = 0; i < res.data.result.length; i++) {
              this.data[i].key = res.data.result[i].ID_NUM;
            }
          } else {
            this.data = [];
          }
        });
    },

  },
  components: {
    headercom,
  },
  created() {
    //获取购物车列表
    this.getShopCartList(this.pagination);
  }
};
</script>

<style lang='less' >
th.column-money,
td.column-money {
  text-align: right !important;
}

.cjwz_box {
  width: 100%;
  .xhcheck {
    .ant-row {
      div {
        display: inline-block;
      }
    }
  }
  .seach {
    display: inline-block;
    .sele {
      position: relative;
      i {
        position: absolute;
        top: 22px;
        right: 8px;
      }
    }
  }
  .hedlist {
    position: relative;
    top: 65px;
    width: 98%;
    left: 1%;
    height: 60px;
    background-color: #fff;
    text-align: left;
    padding: 15px;
    display: flex;
    justify-content: space-between;
  }
  .cjwz {
    overflow: hidden;

    position: absolute;
    background-color: #fff;
    width: 98%;
    top: 140px;
    left: 1%;
    border: 1px solid #ccc;
    // box-shadow: 0px 0px 7px #ccc;
    .ant-checkbox-inner {
      // display: none!important;
    }

    .hydj {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      height: 930px;
      .hydj_xgym {
        position: absolute;
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .gl_tjwz {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999999;
    height: 930px;
    .gl_tjym {
      position: absolute;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.bjtk {
  position: absolute;
  z-index: 9999;
  width: 90%;
  height: auto;
  background-color: #fff;
  text-align: left;
  padding: 20px;
  top: 77px;
  left: 152px;
  .bjtk_list {
    .head {
      display: flex;
      justify-content: space-between;
    }
    .editable-cell {
      position: relative;
    }

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
      padding-right: 24px;
    }

    .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
    }

    .editable-cell-icon {
      line-height: 18px;
      display: none;
    }

    .editable-cell-icon-check {
      line-height: 28px;
    }

    .editable-cell:hover .editable-cell-icon {
      display: inline-block;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
      color: #108ee9;
    }

    .editable-add-btn {
      margin-bottom: 8px;
    }


    
  
    
  }

  
}
</style>
